<template>
  <Layout>
    <template v-slot:content>
      <div class="py-[24px] w-[1200px] flex m-auto box">
        <div class="w-[120px]">
          <a-space size="middle" wrap>
            <template v-for="(item,index) in nav" :key="index">
              <a-space-compact direction="horizontal">
                <a-button :type="item.type==='primary'?item.type:(path===item.router?'default':'text')" size="large"
                          @click="to(item.router)"
                          class="h-[40px] text-[16px]" v-if="item.name">
                  <template #icon>
                    <Icon :icon="item.icon"></Icon>
                  </template>
                  {{ item.name }}
                </a-button>
                <div class="w-[48px]" v-else></div>
              </a-space-compact>
            </template>
          </a-space>
        </div>
        <div class="flex-auto ml-[60px]">
          <router-view/>
        </div>
      </div>
    </template>
  </Layout>
</template>

<script setup>
import Layout from '../../layout/index.vue'
import {Icon} from "../../utils/Icon.js";
import {useRouter, useRoute} from "vue-router";
import {storeToRefs} from "pinia";
import useStat from "../../store/stat.js";

const {questionList} = storeToRefs(useStat())
import {computed, ref} from "vue";

const nav = ref([
  {name: '新建问卷', icon: 'PlusOutlined', type: 'primary', router: 'edit'}, {},
  {name: '我的问卷', icon: 'UnorderedListOutlined', type: 'default', router: 'list'},
  {name: '星际问卷', icon: 'StarOutlined', type: 'text', router: 'star'},
  {name: '回收站', icon: 'DeleteOutlined', type: 'text', router: 'trash'}
])
const $route = useRoute()
const path = computed(() => {
  return $route.path.split('manage/')[1]
})
const $router = useRouter()
const to = (router) => {
  if (router === 'edit') {
    $router.push({name: router, params: {id: Math.floor(Math.random() * 100000000)}})
  }else {
    $router.push({name: router})
    questionList.value = []
  }
}
</script>

<style scoped>
.box {
  min-height: calc(100vh - 64px - 64px);
}
</style>
